<template>
  <el-dialog
    title="重复数据"
    :visible.sync="dialogVisible"
    width="80%"
    :before-close="()=>this.dialogVisible = false"
    :close-on-click-modal="false"
    v-loading="checkDataListLoading"
    :close-on-press-escape="false"
  >
    <el-collapse v-if="checkDataList.length" v-model="activeName" accordion>
      <el-collapse-item v-for="(item,index) in checkDataList" :name="index" :key="index">
        <template slot="title">
          <p class="auto-title">
            <span>{{item.quesInfo}}</span>
            <el-button type="text" @click.stop="autoDelectOdd(item.quesInfo)">自动去重</el-button>
          </p>
        </template>
        <div class="repeat-box">
          <div v-for="(_item, index) in item.quesList" :key="index">
            <h2>
              <p>{{_item.info}}</p>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="deleteHandle(_item.id)"
              />
            </h2>
            <ul>
              <li
                v-for="(x, index) in _item.questionOptionEntities"
                :key="index"
              >{{x.key}}:{{x.option}}</li>
            </ul>
            <div class="repeat-answ">
              <p>
                正确答案：
                <span class="answ">{{_item.answ}}</span>
              </p>
              <p>试题类型：{{_item.quesCateName}}</p>
            </div>
            <p v-if="_item.analysis">试题解析：{{_item.analysis}}</p>
            <h3>该试题使用于下列试卷</h3>
            <hr />
            <el-table :data="_item.paperList" style="width: 100%">
              <el-table-column prop="paperName" label="试卷名称" />
              <el-table-column prop="createTime" label="创建时间" />
            </el-table>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div class="no-repeat" v-else>暂无重复数据</div>
    <el-pagination
      v-if="checkDataList.length"
      @size-change="checkSizeChangeHandle"
      @current-change="checkCurrentChangeHandle"
      :current-page="checkPageIndex"
      :page-sizes="[10, 20, 50]"
      :page-size="checkPageSize"
      :total="checkTotalPage"
      layout="total, sizes, prev, pager, next, jumper"
    />
  </el-dialog>
</template>

<script>
export default {
  name: 'checkTable',
  data() {
    return {
      activeName: '',
      dialogVisible: false,
      checkDataListLoading: true,
      checkPageIndex: 1,
      checkPageSize: 10,
      checkDataList: [],
      checkTotalPage: 0,
      url: '',
      dataListSelections: []
    }
  },
  props: ['getDataList'],
  methods: {
    autoDelectOdd(info) {
      this.$confirm(
        '自动处理重复试题将可能引起误删除问题，误删除后将无法恢复，请确定是否自动处理！',
        '警告⚠️',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }
      )
        .then(() => {
          this.checkDataListLoading = true
          this.$http({
            url: this.$http.adornUrl('/exam-admin/ques/bank/autoremoverepeat'),
            method: 'post',
            data: { quesType: this.quesType, info: info }
          })
            .then(_ => {
              this.checkDataListLoading = false
              this.init(this.url, this.checkPageIndex, this.quesType)
              this.getDataList(1)
            })
            .catch(_ => {
              this.checkDataListLoading = false
            })
        })
        .catch(_ => ({}))
    },
    init(url, page, quesType) {
      this.checkDataListLoading = true
      this.url = url
      this.dialogVisible = true
      this.quesType = quesType
      this.checkPageIndex = page || 1
      this.$http({
        url: this.$http.adornUrl(url),
        method: 'post',
        data: {
          page: this.checkPageIndex,
          limit: this.checkPageSize
        }
      }).then(res => {
        if (res && res.code === 200) {
          if (res.data) {
            if (res.data.list.length) {
              this.checkPageIndex = res.data.currPage
              this.checkDataList = res.data.list
              this.checkTotalPage = res.data.totalCount
            } else {
              if (this.checkPageIndex > 1) {
                this.checkPageIndex--
                this.init(url, this.checkPageIndex, quesType)
              } else {
                this.checkPageIndex = 1
                this.checkDataList = []
                this.checkTotalPage = 0
              }
            }
          } else {
            this.checkPageIndex = 1
            this.checkDataList = []
            this.checkTotalPage = 0
          }
          this.checkDataListLoading = false
        } else {
          this.checkPageIndex = 1
          this.checkDataList = []
          this.checkTotalPage = 0
          this.checkDataListLoading = false
        }
      })
    },
    // 每页数
    checkSizeChangeHandle(val) {
      this.checkPageSize = val
      this.checkPageIndex = 1
      this.init(this.url, this.checkPageIndex, this.quesType)
    },
    // 当前页
    checkCurrentChangeHandle(val) {
      this.checkPageIndex = val
      this.init(this.url, this.checkPageIndex, this.quesType)
    },
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    formatterLevel(row) {
      switch (row.level) {
        case 0:
          return '简单'
        case 1:
          return '正常'
        case 2:
          return '困难'
      }
    },
    deleteHandle(id) {
      this.$confirm(`确定要进行删除操作吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/exam-admin/ques/singer/delete'),
          method: 'post',
          data: {
            ids: id || this.dataListSelections.map(item => item.id).join(',')
          }
        }).then(data => {
          if (data && data.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500
            })
            this.init(this.url, this.checkPageIndex, this.quesType)
            this.getDataList(1)
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.auto-repeat {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}

.repeat-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;

  & > div {
    width: 49%;
    margin: 0.5%;
    padding: 0 20px;
    min-height: 400px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);

    h2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;

      p {
        width: 90%;
      }

      .el-icon-delete-solid {
        color: #f56c6c;
      }
    }

    h3 {
      color: #666;
    }

    & > ul {
      list-style: none;
      padding-left: 10px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;

      li {
        width: 50%;
      }
    }

    .repeat-answ {
      display: flex;
      justify-content: space-between;
      align-items: center;

      p {
        flex: 1;
      }
    }

    .answ {
      font-size: 14px;
      font-weight: bold;
    }
  }
}

.auto-title {
  flex: 1;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.no-repeat {
  padding-bottom: 30px;
  font-size: 20px;
  font-weight: 300;
  line-height: 100px;
  text-align: center;
  color: #d9d9d9;
}
</style>
